<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="js/class/defense_tower.js">
</script>
<script type="text/javascript" src="js/class/main_tower.js">
</script>
<script type="text/javascript" src="js/class/enemy.js">
</script>
<script type="text/javascript" src="js/class/level.js">
</script>
<script type="text/javascript" src="js/utils/json2.js">
</script>

<script type="text/javascript">
	var map = null;
	var markers = {};
	var latlng = null;
	var finalOptions = null;
	
	MarkerType = {
		MAIN_TOWER: 0,
		INITIAL_POINT: 1
	};
	
	initialize = function() {
		var latlng = new google.maps.LatLng(0,0); 
		var options = {
			zoom: 4,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
	
		map = new google.maps.Map(document.getElementById("map_canvas"), options);
  	};

	verify = function() {
		
		return true;
	};

	saveOptions = function() {
		if(verify()) {
			finalOptions = {"levels": new Array()};
			var levels = finalOptions["levels"];
			var idx = levels.length;
		
			levels[idx] = {"name": document.getElementById("levelName").value};
			levels[idx]["initialMoney"] = parseInt(document.getElementById("initialMoney").value)
			levels[idx]["origins"] = new Array();
			levels[idx]["enemyProportions"] = [parseFloat(document.getElementById("ep_1").value), parseFloat(document.getElementById("ep_2").value), parseFloat(document.getElementById("ep_3").value)];
		
			for(var m in markers) {
				var marker = markers[m];
				alert(marker.markerType)
				if(marker.markerType == MarkerType.MAIN_TOWER) {
					levels[idx]["destination"] = {"lat": marker.getPosition().lat(), "lng": marker.getPosition().lng()}
				} else {
					levels[idx]["origins"].push({"lat": marker.getPosition().lat(), "lng": marker.getPosition().lng()})				
				}
			}
			
			localStorage.setItem('db', JSON.stringify(finalOptions));
		} else {
			alert('Errors in the definition of parameters');
		}	
	};
	
	createMarkerAtAddress = function(id, address, type) {
		if(markers[id] != null) {
			markers[id].setMap(null);
			markers[id] = null;
		}
		
		var geocoder = new google.maps.Geocoder();
		geocoder.geocode({ 'address': address}, function callback(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				var options = {
					position: results[0].geometry.location,
					map: map
				};
				
				if(type == MarkerType.MAIN_TOWER) {
					options.icon = "http://img515.imageshack.us/img515/7505/3jpg8vk.jpg"
				}

				var marker = new google.maps.Marker(options);
				
				marker.markerType = type;
				marker.address = address;
				markers[id] = marker;
			} else {
				alert("Geocode was not successful for the following reason: " + status);
			}
		});
	};
	
	setPointInMap = function(id, type) {
		createMarkerAtAddress(id, document.getElementById(id).value.toString(), type);
	};
	

</script>
</head>
<body onload="initialize()">
	<div style="width:100%; height:100%">
		<div style="float: right; z-index: 10">
			Level name: <input type="text" style="" id="levelName"><br/>
			Main Tower's address: <input type="text" style="" id="mainTowerAddress">Vida:<input type="text" id="life"/><button onClick='setPointInMap("mainTowerAddress", MarkerType.MAIN_TOWER)' type="button" style="position: relative; clear: both;">Search</button><br/>
			Origin 1: <input type="text" style="" id="sp_1"/><button onClick='setPointInMap("sp_1", MarkerType.INITIAL_POINT)' type="button"  style="position: relative; clear: both;">Search</button><br/>
			Origin 2: <input type="text" style="" id="sp_2"/><button onClick='setPointInMap("sp_2", MarkerType.INITIAL_POINT)' type="button"  style="position: relative; clear: both;">Search</button><br/>
			Origin 3: <input type="text" style="" id="sp_3"/><button onClick='setPointInMap("sp_3", MarkerType.INITIAL_POINT)' type="button"  style="position: relative; clear: both;">Search</button><br/>
			Origin 4: <input type="text" style="" id="sp_4"/><button onClick='setPointInMap("sp_4", MarkerType.INITIAL_POINT)' type="button"  style="position: relative; clear: both;">Search</button><br/>
			Enemies' proportions: 1 <input type="text" style="" id="ep_1"/> 2 <input type="text" style="" id="ep_2"/> 3 <input type="text" style="" id="ep_3"/><br />
			Initial money: <input type="text" style="" id="initialMoney"/>
			<button onClick='saveOptions()' type="button" id="bbb" style="float: right; position: relative; clear: both;">Submit</button>
		</div>
		<div id="map_canvas" style="width:100%; height:100%; position: relative; z-index:0">
		</div>
	</div>
</body>
</html>